<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .message {
            margin-bottom: 10px;
        }
        .timestamp {
            font-style: italic;
            color: #888;
        }
        .username {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Chat Room</h1>
    <div id="messages"></div>
    <input type="text" id="username" placeholder="Enter your username">
    
    <!-- 新增的发送信息对话框 -->
    <div id="sent-messages" style="margin-top: 20px; border: 1px solid #ccc; padding: 10px; height: 150px; overflow-y: auto;">
        <!-- 发送的消息将在这里展示 -->
    </div>
    <input type="text" id="message" placeholder="Enter message">
    <button id="send">Send</button>
    <script>
      $(document).ready(function() {
    $('#send').click(function() {
        var username = $('#username').val();
        var messageText = $('#message').val();
        var timestamp = new Date().toLocaleTimeString();

        if (username && messageText) {
            // 添加消息到发送信息对话框中
            appendMessageWithDelete($('#sent-messages'), username, messageText, timestamp);
            
            // 也可以同时添加到聊天记录中，如果需要
            // appendMessageWithDelete($('#messages'), username, messageText, timestamp);

            // 清空消息输入框
            $('#message').val('');
        } else {
            alert('Please enter a username and message.');
        }
    });
});

function appendMessageWithDelete(container, username, messageText, timestamp) {
    // 创建消息元素
    var messageHtml = $('<div class="message">')
        .append($('<span class="timestamp">').text(timestamp + ' '))
        .append($('<span class="username">').text(username + ': '))
        .append($('<span class="message-text">').text(messageText) )
            .append(' ')
        .append($('<button class="delete-btn">').text('Delete'));

    // 将消息添加到容器中
    container.append(messageHtml);

    // 为删除按钮添加点击事件监听器
    messageHtml.find('.delete-btn').on('click', function() {
        $(this).parent('.message').remove();
    });
}
    </script>
</body>
</html>